{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>首页-毛笔教育-教师端</title>
<style type="text/css">
    .mui-content{ padding-bottom: 50px;}
    .mui-control-content {
        background-color: #efeff4;
        height: 100%;
    }
    .mui-table-view .mui-media-body{ overflow: visible;}
    .mui-scroll-wrapper,.mui-scroll{ position: relative !important;}
    .mui-segmented-control{ border-radius: 30px;}
    .mui-segmented-control .mui-control-item{ line-height: 40px;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-slider" >
    <div class="mui-slider-group mui-slider-loop">
        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
                <img src="{{ ctx.app.config.api.image }}/{{data.banner[length-1].url}} "/>
            </a>
        </div>
        {% for item in data.banner %}

        <div class="mui-slider-item">
            <a href="#">
                <img src="{{ ctx.app.config.api.image }}/{{item.url}} "/>
            </a>
        </div>

        {% endfor %}
        <!-- 第一张 -->
        <!--<div class="mui-slider-item">
            <a href="#">
                {{data.banner[1].url}}
                <img :src="{{ ctx.app.config.api.static }}+ data.banner[0].url "/>
            </a>
        </div>-->
        <!-- 第二张 -->
        <!-- 第三张 -->

        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
                <img src="{{ ctx.app.config.api.image }}/{{data.banner[0].url}} "/>
            </a>
        </div>
    </div>
    <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <!--<div class="mui-indicator"></div>-->
        {%if arrmark != 0%}
            {% for item in arrmark %}
            <div class="mui-indicator"></div>
            {% endfor %}
        {%endif%}
    </div>
</div>

<div class="mb-latest-news mui-clearfix">
    <i class="mb-ico-news"></i>
    <div class="mb-news-conts" id="up_zzjs">
        <div id="marqueebox" class="marqueebox">

            {%for item in data.notice%}
            <div class="mb-up-li">
                <a class="mb-news-cont mui-ellipsis" href="ann?id={{item.id}}">
                    <span>{{item.title}}</span>
                </a>
            </div>
            {%endfor%}
        </div>
    </div>
</div>
<div class="mui-content">
    <div id="slider" class="mui-slider mb-count">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item mb-control-item mui-active" href="#item1mobile">
                作业统计
            </a>
            <a class="mui-control-item mb-control-item" href="#item2mobile">
                教育资讯
            </a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div class="mb-zy-tj">
                    <!--当日未布置作业状态-->
                    <div class="mb-task-list mb-task-no">
                        <a class="mb-task-btn" href="arrhomework">布置作业</a>
                        今日还未布置作业
                    </div>

                    <!--已布置作业状态-->
                    {% for item in task%}
                    <div class="mb-task-list">
                        <a href="homeworkdetail?id={{item.id}}&studentId={{item.courseId}}">

                                {%if item.currentTime == -1%}
                            <span class="mb-edu-label mb-edu-label1">明天</span>
                            <span class="mb-edu-label mb-edu-label2">{{item.courseName}}</span>
                                {%elif item.currentTime == 0%}
                            <span class="mb-edu-label mb-edu-label1">今天</span>
                            <span class="mb-edu-label mb-edu-label2">{{item.courseName}}</span>
                                {%elif item.currentTime == 1%}
                            <span class="mb-edu-label mb-edu-label1">昨天</span>
                            <span class="mb-edu-label mb-edu-label2">{{item.courseName}}</span>
                                {%else%}
                            <span class="mb-edu-label mb-edu-label1">{{item.currentTime}}</span>
                            <span class="mb-edu-label mb-edu-label2" style="margin-right:6%;">{{item.courseName}}</span>
                                {% endif %}


                            <div class="mb-home-task">{{item.name}}
                                <p>
                                    <span><i class="iconfont icon-shijian"></i> {{item.createTime}} {{item.weekDay}}</span> · <span>{{item.gradeName}}{{item.clazzName}}</span>
                                </p>
                            </div>
                            <div class="mb-items">
                                <span class="mb-item-count">题目数量<span class="mb-badge">{{item.questionCount}}题</span></span>
                            </div>
                            <div class="mb-items">
                                <span class="mb-item-count">完成情况<span class="mb-badge">{{item.finshCount}}/{{item.clazzPersonCount}}</span></span>
                            </div>
                            <div class="mb-delivery-time mui-clearfix">
                                <span class="mui-pull-left">发布时间：{{item.pushDate}}</span>
                                <span class="mui-pull-right">截止时间：{{item.checkTime}}</span>
                            </div>
                        </a>
                    </div>
                    {%endfor%}
                    <!--查看更多-->
                    <div class="mb-task-list">
                        <a class="mb-homework-more" href="homework">
                            查看更多作业
                        </a>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <ul class="mui-table-view">

                    {% for item in data.education %}
                    <li class="mui-table-view-cell mui-media">
                        <a class="mb-news-list" href="information?id={{item.id}}">
                            <img class="mui-media-object mui-pull-left" src="{{ ctx.app.config.api.image }}/{{item.imageUrl}}">
                            <div class="mui-media-body">
                                <h4 class="mb-title mui-ellipsis">{{item.title}}</h4>
                                <p class="mui-ellipsis-2 mb-news-intr">{{item.intro}}</p>
                                <div class="mui-clearfix mb-btm-item">
                                    <p class="mui-pull-left">
                                        <span class="mb-border-radius xw-box">{{item.informationTypeName}}</span>
                                    </p>
                                    <p class="mui-pull-right">
                                        <span><i class="iconfont icon-xiaoxi"></i> {{item.commentCount}}</span>
                                    </p>
                                </div>
                            </div>
                        </a>
                    </li>
                    {% endfor %}
                    <!--更多资讯-->
                    <li class="mui-table-view-cell mui-media">
                        <a class="mb-news-list mb-news-more" href="newslist">
                            查看更多资讯
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--底部tab-->
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item1 mui-active" href="index">
        <span class="mui-icon iconfont icon-shouye"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item1" href="bbs">
        <span class="mui-icon iconfont icon-shequ"></span>
        <span class="mui-tab-label">社区</span>
    </a>
    <a class="mui-tab-item1" href="teaching">
        <span class="mui-icon iconfont icon-shujixinxi"></span>
        <span class="mui-tab-label">教务</span>
    </a>
    <a class="mui-tab-item1" href="/get/imToken">
        <span class="mui-icon iconfont icon-xiaoxi"></span>
        <span class="mui-tab-label">消息</span>
    </a>
    <a class="mui-tab-item1" href="my">
        <span class="mui-icon iconfont icon-wode"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

{% endblock %}

{#js代码#}
{% block js %}
<script type="text/javascript" charset="utf-8">
    //banner滚动
    var slider = mui("#slider");

    //滚动通知栏
    function startmarquee(lh,speed,delay) {
        var p=false;
        var t;
        var o=document.getElementById("marqueebox");
        o.innerHTML+=o.innerHTML;
        o.style.marginTop=0;
        o.onmouseover=function(){p=true;}
        o.onmouseout=function(){p=false;}

        function start(){
            t=setInterval(scrolling,speed);
            if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
        }

        function scrolling(){
            if(parseInt(o.style.marginTop)%lh!=0){
                o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
                if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
            }else{
                clearInterval(t);
                setTimeout(start,delay);
            }
        }
        setTimeout(start,delay);
    }
    startmarquee(38,10,5500);

    //作业统计、教育资讯 选项卡切换
    (function($) {
        $('.mui-scroll-wrapper').scroll({
            indicators: true //是否显示滚动条
        });
        var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
        $('.mui-input-group').on('change', 'input', function() {
            if (this.checked) {
                sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
                //force repaint
                sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
            }
        });
    })(mui);
</script>
<!--flotdemo-->
{% endblock %}
